<template>

    <Panel title="账户设置">
      <div :class="$style.userInfo" slot="body">
        <!-- <el-upload
        class="avatar-uploader"
        :action="baseUrl+'/cms-resource/upload'"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="userInfo.headPortrait" :src="baseUrl+'/cms-resource/getResource/'+userInfo.headPortrait" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload> -->
          <ModifyForm 
            slot="body" 
            :editColumn='editColumn' 
            labelWidth='150px'
            :updateData='updateData'
            :temporaryData='userInfo'>
          </ModifyForm>
      </div>
    </Panel>

</template>

<script>
import Panel from '@/components/Panel'
import ModifyForm from '@/components/ModifyForm'
import { baseUrl } from '@/tools'
export default {
  data() {
    return {
        imageUrl: '',
        userInfo: {},
        editColumn: [
            // {
            //   name: "用户名",
            //   prop: "userName",
            //   type: "text",
            //   disabled: true,
            //   width: 8,
            // },
            {
              name: "旧密码",
              prop: "password",
              type: "text",
              required: true,
              width: 24,
            },
            {
              name: "新密码",
              prop: "newPassword",
              type: "text",
              required: true,
              width: 24,
            }
        ],
    };
  },
    components: {
    Panel,
    ModifyForm,
  },
  computed: {
    baseUrl(){
      return baseUrl
    },
  },
  methods:{
      handleAvatarSuccess(res, file) {
        this.$set(this.userInfo, 'headPortrait', res.data)
        this.$store.dispatch({
          type: 'business/update',
          url: '/sys-user/updateHeadPortrait',
          params: {
            headPortrait: res.data
          }
        })
      },
      beforeAvatarUpload(file) {
        const isJPG = /image\/jpeg|image\/png/.test(file.type)
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是JPG或PNG格式');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      updateData(values){
          this.$store.dispatch({
            type: 'business/update',
            url: '/user/password',
            params: {
              newPassword: values.newPassword,
              password: values.password
            }
          })
      }
  },
  created(){
    this.userInfo = {...this.$store.getters.userInfo}
  }
};
</script>
<style lang='scss' module>
.userInfo{
    :global{
        .avatar-uploader{
            padding-left: 150px;
            margin-bottom: 25px;
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    }
}
</style>
